import React, { Component } from "react";
import { DatePicker } from "antd";
import { getTimeDistance } from "../../utils/index";
import "./TimeSwitch.less";

const { RangePicker } = DatePicker;

class TimeSwitch extends Component {
  constructor(props) {
    super(props);
    this.state = { rangePickerValue: getTimeDistance("year") };
  }
  // 时间区段切换
  handleRangePickerChange = rangePickerValue => {
    this.setState({
      rangePickerValue
    });
  };
  // 日期选择框切换
  selectDate = type => {
    this.setState({
      rangePickerValue: getTimeDistance(type)
    });
  };
  isActive = type => {
    const { rangePickerValue } = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return "";
    }
    if (rangePickerValue[0].isSame(value[0], "day") && rangePickerValue[1].isSame(value[1], "day")) {
      return "currentDate";
    }
    return "";
  };
  render() {
    const { rangePickerValue } = this.state;
    return (
      <div className="salesExtraWrap" style={{ display: "flex", alignItems: "center" }}>
        <div className="salesExtra">
          <span key="today" className={this.isActive("today")} onClick={() => this.selectDate("today")}>
            今日
          </span>
          <span key="week" className={this.isActive("week")} onClick={() => this.selectDate("week")}>
            本周
          </span>
          <span key="month" className={this.isActive("month")} onClick={() => this.selectDate("month")}>
            本月
          </span>
          <span key="year" className={this.isActive("year")} onClick={() => this.selectDate("year")}>
            全年
          </span>
        </div>
        <RangePicker value={rangePickerValue} onChange={this.handleRangePickerChange} style={{ width: 256 }} />
      </div>
    );
  }
}

export default TimeSwitch;
